<template>
  <div class="page-container">
    <slot name="search"></slot>
    <a-card :style="{ marginTop: hasSearchSlot ? '16px' : '0' }" class="page-card">
      <div v-if="hasActionsSlot" class="actions-row">
        <slot name="actions"></slot>
      </div>
      <slot></slot>
    </a-card>
  </div>
</template>

<script setup>
import {computed, useSlots} from 'vue';

const slots = useSlots();
const hasSearchSlot = computed(() => !!slots.search);
const hasActionsSlot = computed(() => !!slots.actions);
</script>

<style scoped>
.page-container {
  width: calc(100vw - 240px); /* 210px是侧边栏宽度 */
  max-width: 100%;
  overflow-x: auto; /* 允许水平滚动，滚动条显示在外层 */
  box-sizing: border-box;
}

.page-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.actions-row {
  margin-bottom: 16px;
}

/* 滚动条美化 */
.page-container::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.page-container::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  border-radius: 4px;
  transition: background 0.3s ease;
}

.page-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #096dd9, #1890ff);
}

.page-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

/* 确保卡片内容区域正确处理溢出 */
:deep(.ant-card-body) {
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}
</style>